<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript"  src="../js/vue.js"></script> 

</head>

<body>
    <div id="root">
        <!-- 第三步 引用 -->
         
    </div>
</body>

<script type="text/javascript">
   Vue.config.productionTip=false;
 
   
   //第一步创建
   let student = {
    template:`
    <div>
        <h1> 名称:{{name}}</h1>
        <h1>年龄:{{age}}</h1>
    </div>
    `,
    data() {
        return {
            name:'JJ',
            age: 18
        }
    }
   }
   let school = {
    template:`
    <div>
        <h1> 名称:{{schoolName}}</h1>
        <h1>地址:{{address}}</h1>
        <student></student>
    </div>
    `,
    data() {
        return {
            schoolName:'清华',
            address: '北京'
        }
    },
    components:{
        student
    }
   }
   let hello = {
    template:`
    <div>
        <h1> 信息:{{msg}}</h1>
        
    </div>
    `,
    data() {
        return {
            msg:'msg'
        }
    }
   }
  
   let app = {
    template:`
    <div>
        <hello> </hello>
        <school> </school>
    </div>
    `,
    components:{
        hello,school
    }
   }
  
    new Vue({
        el:"#root",
        template:`
        <app></app>
        `,
        //第二步 注册
        components:{
            app
        }
        
    })
 
    
</script>
</html>